<template>
  <h2>预约分析</h2>
  <div class="analysis-wrapper">
    <div class="analysis-head-check">
      <div class="label">按条件筛选</div>
      <div>
        <el-checkbox v-model="visitType">就诊类型比例</el-checkbox>
        <el-checkbox v-model="project">预约项目分布</el-checkbox>
        <el-checkbox v-model="doctor">预约医生分布</el-checkbox>
        <el-checkbox v-model="source">患者来源分布</el-checkbox>
        <el-checkbox v-model="tip">患者标签分布</el-checkbox>
        <el-checkbox v-model="appointmentType">预约类型分布</el-checkbox>
      </div>
    </div>
    <!-- 预约分析 -->
    <div class="wrapper" v-show="visitType">
      <div class="wrapper-area-type">
        <div ref="type" style="width: 800px; height: 580px;"></div>
      </div>
    </div>

    <div class="wrapper" >
      <div class="wrapper-area-type">
        <div ref="projectRef" style="width: 800px; height: 580px;"></div>
      </div>
    </div>
  </div>
  
</template>

<script lang='ts'>
import { defineComponent, ref, inject, onMounted, reactive, toRefs } from '@vue/runtime-core'

export default defineComponent({
  name: 'AppointmentAnalysis',
  setup() {
    const type = ref<HTMLElement>()
    const projectRef = ref<HTMLElement>()
    let echarts: any = inject("echart");
    let state = reactive({
      visitType: true,
      project: true,
      doctor: true,
      source: true,
      tip: true,
      appointmentType: true
    })

    onMounted(() => {
      // 就诊类型初始化
      let myChart = echarts.init(type.value);
      let options = {
        title: {
          text: '就诊类型比例',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          top: '12%',
          width: 650,
          itemGap: 15
        },
        color: ['#409EFF', '#E6A23C', '#67C23A', '#F56C6C','#ffde00', '#ffde00', '#00eaff'],
        series: [
          {
            name: '就诊类型',
            type: 'pie',
            radius: '50%',
            width: '100%',
            data: [
              { value: 1048, name: '初诊(10%)' },
              { value: 735, name: '复诊' },
              { value: 580, name: '初诊老客户' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(options)
      myChart.on('click', function(params: any) {
        console.log(params.name)
      });

      // 预约项目初始化
      let myChart1 = echarts.init(projectRef.value);
      let options1 = {
        title: {
          text: '预约项目分布',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          top: '12%',
          width: 650,
          itemGap: 20
        },
        color: ['#409EFF', '#E6A23C', '#67C23A', '#F56C6C','#ffde00', '#ffde00', '#00eaff'],
        series: [
          {
            name: '预约项目分布',
            type: 'pie',
            radius: '50%',
            width: '100%',
            data: [
              { value: 1048, name: '根充(10%)' },
              { value: 735, name: '换药' },
              { value: 580, name: '拔牙' },
              { value: 484, name: '拆线' },
              { value: 300, name: '根充' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart1.setOption(options1)
      myChart1.on('click', function(params: any) {
        console.log(params.name)
      });
    })
    return {
      type,
      projectRef,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
.analysis-wrapper {
  color: $primaryText;
  .analysis-head-check {
    display: flex;
    .label {
      font-weight: bold;
      font-size: 14px;
      padding-right: 10px;
    }
  }
}
</style>